Employee Spotlight
From Academia to Industry
Philipp Burckhardt recounts his journey from childhood computer fascinations, to building an e-learning platform at Carnegie Mellon University, and on to his current role at Socket.
vue3-notion
Advanced tools
Readme
An unofficial Notion renderer (Vue 3) version
A Vue 3 renderer for Notion pages (ported from vue-notion). Special thanks to Jannik Siebert & all the vue-notion
contributors that made the vue-notion
possible!
Use Notion as CMS for your blog, documentation or personal site. Also check out react-notion (developed by Splitbee 🐝 – a fast, reliable, free, and modern analytics for any team)
This package doesn't handle the communication with the API (I planned to add this!). Check out notion-api-worker from Splitbee for an easy solution.
Created by Zernonia
🌎 SSR / Static Generation Support – Functions to work with Nuxt3 and other frameworks
🎯 Accurate – Results are almost identical
🎨 Custom Styles – Styles are easily adaptable. Optional styles included
🔮 Syntax-Highlighting – Beautiful themeable code highlighting using Prism.js
npm install vue3-notion
# yarn add vue3-notion
Install as a dev-dependency and add "vue3-notion/nuxt"
to the buildModules
array in nuxt.config.js
.
npm install vue3-notion --save-dev
// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"
export default defineNuxtConfig({
//...
modules: [
["vue3-notion/nuxt", { css: true }], // css is not imported by default. Set `true` to import css
],
})
These examples use a simple wrapper around the notion-api-worker
to access the Notion page data.
It is also possible to store a page received from the Notion API in .json
and use it without the async/await
part.
Use the
getPageBlocks
andgetPageTable
methods with caution! They are based on the private Notion API. We can NOT guarantee that it will stay stable. The private API is warpped by notion-api-worker.
This example is a part of demo/
and is hosted at vue3-notion.vercel.app.
<script setup lang="ts">
import { NotionRenderer, getPageBlocks, useGetPageBlocks } from "vue3-notion"
import { ref, onMounted } from "vue"
const data = ref()
onMounted(async () => {
data.value = await getPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
})
// ---- or using Composables ----
const { data } = useGetPageBlocks("4b2dc28a5df74034a943f8c8e639066a")
</script>
<template>
<NotionRenderer v-if="data" :blockMap="data" fullPage />
</template>
<style>
@import "vue3-notion/dist/style.css"; /* optional Notion-like styles */
@import "prismjs/themes/prism.css";
@import "katex/dist/katex.min.css";
</style>
This example is a part of demo/
and is hosted at vue3-notion.vercel.app.
<script setup lang="ts">
const { $notion } = useNuxtApp()
const { data } = await useAsyncData("notion", () => $notion.getPageBlocks("2e22de6b770e4166be301490f6ffd420"))
</script>
<template>
<NotionRenderer :blockMap="data" fullPage prism />
</template>
Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
Block Type | Supported | Notes |
---|---|---|
Text | ✅ Yes | |
Heading | ✅ Yes | |
Image | ✅ Yes | |
Image Caption | ✅ Yes | |
Bulleted List | ✅ Yes | |
Numbered List | ✅ Yes | |
Quote | ✅ Yes | |
Callout | ✅ Yes | |
Column | ✅ Yes | |
iframe | ✅ Yes | |
Video | ✅ Yes | Only embedded videos |
Divider | ✅ Yes | |
Link | ✅ Yes | |
Code | ✅ Yes | |
Web Bookmark | ✅ Yes | |
Toggle List | ✅ Yes | |
Page Links | ✅ Yes | |
Cover | ✅ Yes | Enable with fullPage |
Equations | ✅ Yes | |
Checkbox | ✅ Yes | |
Simple Tables | ✅ Yes | |
Table Of Contents | ✅ Yes | |
Databases | ☑️ Planned |
Please, feel free to open an issue if you notice any important blocks missing or anything wrong with existing blocks.
Yarn
npm install --global yarn
git clone https://github.com/zernonia/vue3-notion.git
yarn
yarn dev
MIT © zernonia
FAQs
Vue 3 Unofficial Notion Renderer
The npm package vue3-notion receives a total of 1,492 weekly downloads. As such, vue3-notion popularity was classified as popular.
We found that vue3-notion demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Employee Spotlight
Philipp Burckhardt recounts his journey from childhood computer fascinations, to building an e-learning platform at Carnegie Mellon University, and on to his current role at Socket.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.